<template>
  <div class="BillingDetail">
    <van-nav-bar title="账单明细查询"  right-text="历史账单" />

		<div class="main">
			<van-cell class="box"  title="腾讯白金卡(1102)" value="内容" size="large" >
				<template #icon>
					<img class="icon1" src="./img/icon1.png" slot="icon"></img>
				</template>
				<template #default>
					<van-button size="small" round color="rgba(0,0,255,0.1)" class="firstBtn" >切换账户</van-button>
				</template>
			</van-cell>
			<van-tabs class="vanTabs" color="#175ceb" :active="active" bind:change="onChange">
			  <van-tab >
					<template #title>
						<p class="supTitle">已出账单明细</p>
						<p>3月(2-16至3-25)</p>
					</template>
					<div class="tabMain">
						<p class="tabMain_title">账单总金额</p>
						<van-cell-group class="inputBox">
						  <van-field
								class="inputMoney"
						    v-model="inputMoney"
						    placeholder="请输入金额"
						    :border="false"
								@change="moneyChange()"
						  />
						</van-cell-group>
						<p class="tabMain_tips">剩余应还金额(元)<span>
							0.00
						</span></p>
						<van-divider />
						<van-row class="rowBox" gutter="20">
						  <van-col class="colBtn" span="8">
								快速还款
							</van-col>
						  <van-col class="colBtn" span="8">
								延期还款
								<img src="./img/tips.png" alt="" />
							</van-col>
						  <van-col class="colBtn lastColbtn" span="8">
								分期还款
								<img src="./img/tips2.png" alt="" />
							</van-col>
						</van-row>
					</div>
					<div class="list">
						<van-cell class="box listBox"  size="large" is-link @click="jumpUrl()">
							<template #title>
								<p class="">支付宝-宁波电业局</p>
								<p class="subtitle">2024-03-04 07:58:47</p>
							</template>
							<template #default>
								<span class="rightTis">+3.89元</span>
							</template>
						</van-cell>
						<van-cell class="box listBox"  size="large" is-link @click="jumpUrl()">
							<template #title>
								<p class="">网银转入-621626..</p>
								<p class="subtitle">2024-03-04 07:58:47</p>
							</template>
							<template #default>
								<span class="rightTis">-8.10元</span>
							</template>
						</van-cell>
					</div>
				</van-tab>
			  <van-tab >
			  	<template #title>
			  		<p class="supTitle">未出账单明细</p>
			  		<p>4月(3-26至4-25)</p>
			  	</template>
			  	<div class="tabMain">
			  		<p class="tabMain_title">账单总金额</p>
			  		<van-cell-group class="inputBox">
			  		  <van-field
			  				class="inputMoney"
			  		    v-model="inputMoney2"
			  		    placeholder="请输入金额"
			  		    :border="false"
			  				@change="moneyChange()"
			  		  />
			  		</van-cell-group>
			  		<p class="tabMain_tips">剩余应还金额(元)<span>
			  			97,867.71
			  		</span></p>
			  		<van-divider />
			  		<van-row class="rowBox" gutter="20">
			  		  <van-col class="colBtn" span="12">
			  				快速还款
			  			</van-col>
			  		  <van-col class="colBtn lastColbtn" span="12">
			  				未出账单分期
			  				<img src="./img/tips2.png" alt="" />
			  			</van-col>
			  		</van-row>
			  	</div>
			  	<div class="list">
			  		<van-cell class="box listBox"  size="large" is-link @click="jumpUrl()">
			  			<template #title>
			  				<p class="">财付通-美团平台商户</p>
			  				<p class="subtitle">2024-03-04 07:58:47</p>
			  			</template>
			  			<template #default>
			  				<span class="rightTis">+107.89元</span>
			  			</template>
			  		</van-cell>
			  		<van-cell class="box listBox"  size="large" is-link @click="jumpUrl()">
			  			<template #title>
			  				<p class="">支付宝-项书琦</p>
			  				<p class="subtitle">2024-03-04 07:58:47</p>
			  			</template>
			  			<template #default>
			  				<span class="rightTis">+5.00元</span>
			  			</template>
			  		</van-cell>
						<van-cell class="box listBox"  size="large" is-link @click="jumpUrl()">
							<template #title>
								<p class="">支付宝-数据中心</p>
								<p class="subtitle">2024-03-05 06:54:37</p>
							</template>
							<template #default>
								<span class="rightTis">+4.00元</span>
							</template>
						</van-cell>
						<van-cell class="box listBox"  size="large" is-link @click="jumpUrl()">
							<template #title>
								<p class="">支付宝-数据中心</p>
								<p class="subtitle">2024-03-05 06:54:37</p>
							</template>
							<template #default>
								<span class="rightTis">+4.00元</span>
							</template>
						</van-cell>
						<van-cell class="box listBox"  size="large" is-link @click="jumpUrl()">
							<template #title>
								<p class="">支付宝-数据中心</p>
								<p class="subtitle">2024-03-05 06:54:37</p>
							</template>
							<template #default>
								<span class="rightTis">+4.00元</span>
							</template>
						</van-cell>
						<van-cell class="box listBox"  size="large" is-link @click="jumpUrl()">
							<template #title>
								<p class="">支付宝-数据中心</p>
								<p class="subtitle">2024-03-05 06:54:37</p>
							</template>
							<template #default>
								<span class="rightTis">+4.00元</span>
							</template>
						</van-cell>
						<van-cell class="box listBox"  size="large" is-link @click="jumpUrl()">
							<template #title>
								<p class="">支付宝-数据中心</p>
								<p class="subtitle">2024-03-05 06:54:37</p>
							</template>
							<template #default>
								<span class="rightTis">+4.00元</span>
							</template>
						</van-cell>
						<van-cell class="box listBox"  size="large" is-link @click="jumpUrl()">
							<template #title>
								<p class="">网银转入-621626..</p>
								<p class="subtitle">2024-03-04 07:58:47</p>
							</template>
							<template #default>
								<span class="rightTis">-8.10元</span>
							</template>
						</van-cell>
						<van-cell class="box listBox"  size="large" is-link @click="jumpUrl()">
							<template #title>
								<p class="">网银转入-621626..</p>
								<p class="subtitle">2024-03-04 07:58:47</p>
							</template>
							<template #default>
								<span class="rightTis">-8.10元</span>
							</template>
						</van-cell>
			  	</div>
			  </van-tab>
			</van-tabs>
		</div>
	</div>
</template>

<script>
export default {
  name: "BillingDetail",
  components: {},
  data() {
    return {
			active:'0',
			inputMoney:'3.89',
			inputMoney2:'132.29',
		};
  },
  methods: {
    onClickLeft() {
      this.$router.push('/home');
    },
		onChange(e) {
			console.log(e);
		},
		moneyChange(){
			console.log(this.inputMoney);
		},
		jumpUrl(){
			this.$router.push('/billInfo');
		}
  }
};
</script>

<style lang="less" scoped>
	/deep/ .van-icon{
		color: #676565;
	}
	/deep/.van-nav-bar__title{
		color: #676565;
	}
	.BillingDetail{
		background-color: #5756560d;
		width: 100%;
		min-height: 100vh;
	}
	/deep/.van-nav-bar>.van-nav-bar__content>.van-nav-bar__title{
		/* font-size: 20px!important; */
	}
	/deep/.van-nav-bar__right .van-nav-bar__text{
		color: gray!important;
	}
	.main{
		padding: 0 0.16rem;
	}
	.icon1{
		width: 0.15rem;
		height: 0.15rem;
		margin-right: 0.1rem;
	}
	.box{
		margin-top: 0.1rem;
		flex-direction: row;
		align-items: center;
		border-radius: 0.05rem;
		/deep/.van-cell__title{
			font-weight: 700;
			line-height: 34px;
		}
	}
	.firstBtn{
		border-color: #175ceb!important;
		.van-button__text{
			color: #175ceb;
		}
	}
	.vanTabs{
		margin-top: 0.1rem;
		/deep/.van-tabs__wrap{
			border-radius: 0.05rem;
			margin-bottom: 0.1rem;
			height: 0.5rem;
		}
		/deep/.van-tabs__content{
			border-radius: 0.05rem;
		}
		/deep/.van-tab__text{
			display: block;
			.supTitle{
				font-size: 0.14rem;
				margin-bottom: 0.05rem;
			}
			p{
				display: block;
				margin: 0;
				color: #ccc;
				text-align: center;
			}
		}
		/deep/.van-tab--active{
			.supTitle{
				font-weight: 600;
				color: black;
			}
		}
		.tabMain{
			font-size: 0.12rem;
			padding: 0.16rem;
			background-color: #fff;
			border-radius: 0.05rem;
			.tabMain_title{
				font-size: 12px;
				color: #ccc;
			}
			.tabMain_tips{
				font-size: 12px;
				color: #ccc;
				span{
					font-weight: 500;
					color: black;
					padding-left: 0.02rem;
				}
			}
			p{
				margin: 0;
			}
			.inputBox{

				/deep/input{
					font-size: 0.25rem;
					font-weight: 700;
				}
			}
			/deep/.van-hairline--top-bottom::after {
				border: none;
			}
			.inputMoney{
				padding-left: 0;
			}
		}
		.list{
			margin-top: 0.1rem;
			.listBox{
				margin-top: 0;
				border-radius: initial;
				p{
					margin: 0 ;
				}
				/deep/.van-cell__title{
					font-weight: 700;
					line-height: normal;
				}
				.subtitle{
					margin-top: 0.02rem;
					color: #ccc;
					font-size: 12px;
				}
				.rightTis{
					font-weight: 600;
					color: black;
				}
			}
		}
		.rowBox{
				margin-top: 0.2rem;
		}
		.colBtn{
			text-align: center;
			border-right: 1px #ccc solid;
			color: #175ceb;
			font-size: 0.12rem;
			position: relative;
			img{
				position: absolute;
				top: -70%;
				right: 20%;
				width: 0.3rem;
			}

		}
		.lastColbtn{
			border-right:none;
		}
	}
</style>
